<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/zan-admin.min.css" rel="stylesheet">
    <!-- 插件依赖 -->
    <link href="lib/croppie/croppie.min.css" rel="stylesheet">
</head>

<body>
    <header class="zan-header">
        <span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
        <div class="zan-header-center">
            <div class="zan-nav-item"><a href="index.html">首页</a></div>
            <div class="zan-nav-item"><a href="platform.html">平台</a></div>
            <div class="zan-nav-item"><a href="#">商城</a></div>
            <div class="zan-nav-item"><a href="#">运营</a></div>
        </div>
        <div class="zan-avatar-wrap">
            <div class="dropdown">
                <img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">admin</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">超级管理员</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">通知 <span class="badge">10</span></a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="#">清空缓存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="page_login.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
    <aside class="zan-aside">
        <div class="zan-brand">
            <a href="index.html">zan-admin后台管理系统</a>
        </div>
        <ul class="zan-sidebar">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
                </a>
            </li>
            <li>
                <a href="fonticon.html">
                    <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
                </a>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_flatpickr.html">flatpickr</a></li>
                    <li><a href="plug_datetimepicker.html">datetimepicker</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_fileupload.html">fileupload</a></li>
                    <li><a href="plug_webuploader.html">webuploader</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_chart.html">chart</a></li>
                    <li><a href="plug_echarts.html">echarts</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_tinymce.html">tinymce</a></li>
                    <li><a href="plug_editor.md.html">editor.md</a></li>
                    <li><a href="plug_ueditor.md.html">ueditor</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_formvalidation.html">formvalidation</a></li>
                    <li><a href="plug_jquery.validation.html">jquery.validation</a></li>
                </ul>
            </li>
            <li class="haschildren open">
                <a href="#">
                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_sweetalert.html">sweetalert</a></li>
                    <li><a href="plug_notify.html">notify</a></li>
                    <li><a href="plug_timeline.html">timeline</a></li>
                    <li><a href="plug_clipboard.html">clipboard</a></li>
                    <li><a href="plug_croppie.html">croppie</a></li>
                    <li><a href="plug_lightbox.html">lightbox</a></li>
                    <li><a href="plug_touchslider.html">touchslider</a></li>
                    <li><a href="plug_rocket.html">rocket</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
                </a>
                <ul class="zan-submenu">
                    <li><a href="page_login.html" target="_blank">登录页面</a></li>
                    <li><a href="page_curd.html">CURD页面</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="page_error.html" target="_blank">错误页面</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <!-- 面包屑导航 -->
    <div class="zan-breadcrumb">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>

    <main class="zan-main">
        <div class="container-fluid">
            <blockquote>
                <p>更多详细内容可查阅官网</p>
                <p>官方网站:
                    <a href="https://github.com/Foliotek/Croppie">croppie</a>
                </p>
                <footer>zan-admin</footer>
            </blockquote>
            <img src="./static/images/avatar.jpg" width="80px" height="80px" data-toggle="modal" data-target="#myModal">
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">头像更换</h4>
                        </div>
                        <div class="modal-body">
                            <div id="vanilla-demo"></div>
                        </div>
                        <div class="modal-footer">
                            <!-- 文件选择框 -->
                            <input type="file" class="hidden" id="upload" accept="image/*" />
                            <!-- 上传按钮(实际上就是调用上面那个按钮,为了美化上传按钮) -->
                            <button type="button" class="btn btn-info" onclick="$('#upload').click();"><i
                                    class="fa fa-upload"></i>上传</button>
                            <button data-deg="90" type="button" class="btn btn-warning rotate">左旋转</button>
                            <button data-deg="-90" type="button" class="btn btn-danger rotate">右旋转</button>
                            <button type="button" class="btn btn-success upload-result">确定</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/zan-admin.min.js"></script>
    <!-- 插件依赖 -->
    <script src="lib/croppie/croppie.min.js"></script>
    <script>

        //这是ajax方式初始化
        // $uploadCrop = $('#upload-demo').croppie({
        //     //开启旋转
        //     enableOrientation: true,
        //     viewport: {
        //         width: 200,
        //         height: 200,
        //         type: 'circle'
        //     },
        //     boundary: { width: 260, height: 260 }
        // });

        // 1.原生js初始化
        var el = document.getElementById('vanilla-demo');
        var vanilla = new Croppie(el, {
            viewport: { width: 200, height: 200, type: 'circle' },
            boundary: { width: 300, height: 300 },
            showZoomer: false,
            enableOrientation: true
        });

        //2.绑定图片(必须要在模态框加载完毕后绑定)
        $('#myModal').on('shown.bs.modal', function () {
            vanilla.bind({
                url: 'static/images/avatar.jpg',
                // 初始化时的方向
                orientation: 1
            });
        });


        // 3.文件上传输入框变化监听
        $('#upload').on('change', function () {
            //判断文件是否已经上传
            if (this.files && this.files[0]) {

                var reader = new FileReader();


                reader.onload = function (e) {
                    //4.上传后再次绑定回去展示
                    vanilla.bind({
                        url: e.target.result,
                        orientation: 1
                    });
                }
                reader.readAsDataURL(this.files[0]);
            }
            else {
                alert("抱歉-您的浏览器不支持FileReader API")
            }
        });


        //5.旋转操作
        $('.rotate').on('click', function () {
            //jquery方式初始化的需要如下方式
            // vanilla.croppie('rotate', parseInt($(this).data('deg')));
            // 普通js方式
            vanilla.rotate(parseInt($(this).data('deg')));
        });


        //6.点击获取结果进行上传操作
        $('.upload-result').on('click', function (ev) {
            vanilla.result('blob').then(function (blob) {
                alert("这里执行上传操作")
                //注意：window.URL.createObjectURL(blob) 得到的地址可以直接在img上展示
                console.log(window.URL.createObjectURL(blob))
            });
            // 同样ajax初始化的实例需要这样才能上传
            // $uploadCrop.croppie('result', {
            //     type: 'blob',
            //     size: 'viewport'
            // }).then(function (blob) {
            //     alert("在这里发送ajax上传")
            // });

        });
    </script>
</body>

</html>